<template>
  <div class="order-detail-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <h3>订单详情</h3>
          <el-button type="primary" @click="fetchOrderDetails">查询订单</el-button>
        </div>
      </template>

      <!-- 订单ID输入框 -->
      <el-form :model="form" label-width="100px">
        <el-form-item label="订单ID">
          <el-input v-model="form.orderId" placeholder="请输入订单ID" />
        </el-form-item>
      </el-form>

      <!-- 订单详情展示 -->
      <div v-if="orderDetail" class="detail-content">
        <el-descriptions title="订单信息" :column="2" border>
          <el-descriptions-item label="订单号">{{ orderDetail.number }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <el-tag :type="getStatusType(orderDetail.status)">
              {{ getStatusText(orderDetail.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="下单时间">{{ orderDetail.orderTime }}</el-descriptions-item>
          <el-descriptions-item label="金额">¥{{ orderDetail.amount }}</el-descriptions-item>
          <el-descriptions-item label="收货人">{{ orderDetail.consignee }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ orderDetail.phone }}</el-descriptions-item>
          <el-descriptions-item label="收货地址" :span="2">{{ orderDetail.address }}</el-descriptions-item>
          <el-descriptions-item label="备注" :span="2">{{ orderDetail.remark || '无' }}</el-descriptions-item>
        </el-descriptions>

        <!-- 订单商品列表 -->
        <h4 style="margin-top: 20px">商品列表</h4>
        <el-table :data="orderDetail.orderDetailList" border style="width: 100%">
          <el-table-column prop="name" label="商品名称" />
          <el-table-column prop="number" label="数量" width="80" />
          <el-table-column prop="amount" label="金额" width="100">
            <template #default="scope">¥{{ scope.row.amount }}</template>
          </el-table-column>
          <el-table-column label="口味" width="200">
            <template #default="scope">{{ scope.row.dishFlavor || '无' }}</template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 加载中状态 -->
      <div v-if="loading" class="loading-container">
        <el-icon class="is-loading"><Loading /></el-icon>
        <span>加载中...</span>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Loading } from '@element-plus/icons-vue'
import orderApi from '@/api/order'

// 表单数据
const form = ref({
  orderId: ''
})

// 订单详情数据
const orderDetail = ref(null)

// 加载状态
const loading = ref(false)

// 获取订单详情
const fetchOrderDetails = async () => {
  console.log('点击查询按钮，准备获取订单详情')
  console.log('订单ID:', form.value.orderId)
  
  if (!form.value.orderId) {
    ElMessage.warning('请输入订单ID')
    return
  }

  loading.value = true
  orderDetail.value = null

  try {
    console.log('开始调用 API...')
    const response = await orderApi.getOrderDetail(form.value.orderId)
    console.log('API 响应:', response)
    
    if (response.code === 1) {
      orderDetail.value = response.data
      ElMessage.success('查询成功')
    } else {
      ElMessage.error(response.msg || '查询失败')
    }
  } catch (error) {
    console.error('API 调用失败:', error)
    ElMessage.error('查询订单详情失败')
  } finally {
    loading.value = false
  }
}

// 获取订单状态文本
const getStatusText = (status) => {
  const statusMap = {
    1: '待付款',
    2: '待接单',
    3: '已接单',
    4: '派送中',
    5: '已完成',
    6: '已取消'
  }
  return statusMap[status] || '未知'
}

// 获取状态标签类型
const getStatusType = (status) => {
  const typeMap = {
    1: 'info',
    2: 'warning',
    3: 'primary',
    4: 'success',
    5: 'success',
    6: 'danger'
  }
  return typeMap[status] || 'info'
}
</script>

<style scoped>
.order-detail-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-content {
  margin-top: 20px;
}

.loading-container {
  text-align: center;
  padding: 50px;
  color: #909399;
}

.el-descriptions {
  margin-top: 20px;
}
</style> 